<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>设置佣金比例</title>

    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
          rel="stylesheet">
    <!-- Morris -->
    <link href="../../resource/hotui/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/hotui/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>
    <link href="../../resource/lib/imageview/css/imageviewer.css" rel="stylesheet"/>
    <style>

        #edit_form button {
            padding: 4px 12px;
        }

        .form-inline {
            display: flex;
            flex-direction: row;
            align-content: center;
            justify-content: center;
        }

        .input-group, .form-control, .col-sm-7 {
            display: inline-block !important;
        }

        .form-control {
            width: 100px !important;
            height: 34px !important;
        }

        .input-group-addon {
            width: 50px !important;
            height: 34px !important;
        }

        .control-label {
            padding-top: 5px !important;
        }
    </style>
</head>

<body>
<div class="wrapper wrapper-content  fadeInRight tooltip-demo" style="padding: 0px;">
    <form role="form" id="edit_form">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content" style="border-top: none;">
                        <div class="panel-body form-horizontal">
                            <div class="form-group form-inline jsFirst jsRate">
                                <label class="col-sm-3 control-label" style="padding-top: 0px;">抽成比例：</label>
                                <div class="col-sm-7">
                                    <div class="input-group">
                                        <input type="text" th:value="${commissionRate}" id="commissionRate"
                                               class="form-control only-float"/>
                                        <span class="input-group-addon">%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group form-inline jsFirst">
                                <label class="col-sm-3 control-label" style="padding-top: 0px;">一级返利：</label>
                                <div class="col-sm-7">
                                    <div class="input-group">
                                        <input type="text" th:value="${rebateRateOne}" id="rebateRateOne"
                                               class="form-control only-float rebate-rate"/>
                                        <span class="input-group-addon">%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group form-inline jsFirst">
                                <label class="col-sm-3 control-label" style="padding-top: 0px;">二级返利：</label>
                                <div class="col-sm-7">
                                    <div class="input-group">
                                        <input type="text" th:value="${rebateRateTwo}" id="rebateRateTwo"
                                               class="form-control only-float rebate-rate"/>
                                        <span class="input-group-addon">%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group form-inline jsFirst">
                                <label class="col-sm-3 control-label" style="padding-top: 0px;">平台留存：</label>
                                <div class="col-sm-7">
                                    <div class="input-group">
                                        <input type="text" th:value="${platformRemain}" id="platformRemain"
                                               readonly="readonly" class="form-control only-float"/>
                                        <span class="input-group-addon">%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div style="text-align: center">
                                    <button class="btn btn-success btn-submit" type="button" id="editBtn">
                                        保存
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js(123123)}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js}"></script>

<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>

<script type="text/javascript" th:inline="javascript">
    const editUri = /*[[@{/live/rate/edit/}]]*/  "";
    const roomId =/*[[${roomId}]]*/ 0;
</script>

<script type="text/javascript">
    var index = parent.layer.getFrameIndex(window.name);

    $(function () {

        $(".rebate-rate").change(function () {
            let rebateRateOne = parseFloat($("#rebateRateOne").val());
            let rebateRateTwo = parseFloat($("#rebateRateTwo").val());
            let v = 100 - rebateRateOne - rebateRateTwo;
            if (v < 0) {
                v = 0;
            }
            $("#platformRemain").val(v);

        });


        $("#editBtn").click(function () {
            let commissionRate = $("#commissionRate").val();
            let rebateRateOne = $("#rebateRateOne").val();
            let rebateRateTwo = $("#rebateRateTwo").val();
            let requestData = {
                commissionRate,
                rebateRateOne,
                rebateRateTwo
            };
            hot.ajax(editUri + roomId, requestData, function (apiResult) {
                if (apiResult.resultCode === 2000) {
                    hot.tip.success("设置成功", function () {
                        parent.location.reload();
                        parent.layer.close(index);
                    }, 300);
                } else {
                    hot.tip.error(apiResult.resultMsg);
                }
            }, function () {
            }, "post", 300);
        })
    });
</script>
</body>

</html>
